<template>
  <el-dialog
    title="考试关联"
    :visible.sync="dialogVisible"
    append-to-body
    width="50%">
    <el-form :inline="true">
      <el-col>
        <el-form-item label="试卷分类" prop="cateId">
          <el-input placeholder="请选择分类" :value="current.name" type="text" readonly>
            <template slot="prepend">
              <el-button class="el-icon-edit" @click="checkSort" type="text">选择分类</el-button>
            </template>
            <template slot="suffix">
              <el-button
                v-show="current.name"
                class="el-icon-delete-solid"
                @click="deleteCate"
                type="text"
              >清空</el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="考试名称" prop="cateId">
          <el-input v-model="dataForm.name"  placeholder="请输入考试名称" ></el-input>
        </el-form-item>
      </el-col>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      row-key="id"
      border
      ref='multipleTable'
      size="mini"
      style="width: 100%;"
    >
      <el-table-column align="center">
        <template slot="header" slot-scope="scope">
          <el-button type="text" :t="scope" @click="checkAll()">全选</el-button>
        </template>
        <template slot-scope="scope">
          <el-button type="text" v-if="!scope.row.isChecked" @click="checkOne(scope.row)">选择</el-button>
          <el-button type="text" disabled v-else>已选择</el-button>
        </template>
      </el-table-column>
<!--      <el-table-column label="序号" type="index" align="center" width="50"></el-table-column>-->
      <el-table-column prop="name" header-align="center" align="center" label="考试名称"></el-table-column>
      <el-table-column prop="cateName" label="考试分类" header-align="center" align="center"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="dataForm.page"
      :page-sizes="[10, 20, 50]"
      :page-size="dataForm.limit"
      :total="dataForm.totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="onsubmit" :loading="loading">确定</el-button>
    </div>

    <el-dialog
      title="分类管理"
      :visible.sync="dialogFormVisible"
      :show-close="false"
      append-to-body
      width="30%"
    >
      <paper-cate
        ref="paperCate"
        :setCurrent="setCurrent"
        :url="{
                                update:'/exam-admin/exam/cate/update',
                                save:'/exam-admin/exam/cate/save',
                                delete:'/exam-admin/exam/cate/delete',
                                tree:'/exam-admin/exam/cate/tree'
                                }"
        :current="current"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
  import paperCate from '../../paper/papercate'
  export default {
    name: 'course-plugin',
    data() {
      return {
        dataList: [],
        examList: [],
        dialogFormVisible: false,
        dialogVisible: false,
        paperCate: false,
        loading: false,
        examId: '',
        cateId: '',
        current: {},
        dataForm: {
          name: '',
          page: 1,
          limit: 10,
          totalPage: 0
        }
      }
    },
    props: ['setExamList'],
    components: { paperCate },
    methods: {
      open(userId, examList, examId) {
        this.cateId = ''
        this.current.name = ''
        this.examId = examId
        this.examList = examList || []
        this.userId = userId
        this.loading = false
        this.dialogVisible = true
        this.dataForm = {
          page: 1,
          limit: 10,
          totalPage: 0
        }
        this.getDataList()
      },
      setCurrent(data) {
        console.log(data)
        if (data.id) {
          this.current = data
          this.cateId = data.id
          // this.$nextTick(_ => this.$refs['form'].validateField('cateId'))
        }
      },
      async getDataList() {
        let res = await this.$http.post('/exam-admin/exam/list', {
          'page': this.dataForm.page,
          'limit': this.dataForm.limit,
          'userId': this.userId,
          'cateId': this.cateId,
          'name': this.dataForm.name,
          'status': 1
        })
        if (res && res.code === 200) {
          if (this.examList) {
            res.data.list.forEach(item => {
              let isChecked = this.examList.findIndex(x => x.examId === item.examId) > -1
              item.isChecked = isChecked
            })
          }
          this.dataList = res.data.list
          this.dataForm.totalPage = res.data.totalCount
          this.dataForm.pageSize = res.data.pageSize
          this.dataForm.currPage = res.data.currPage
        }
      },

      // 每页数
      sizeChangeHandle(val) {
        this.dataForm.limit = val
        this.dataForm.page = 1
        this.getDataList()
      },
      checkSort() {
        this.dialogFormVisible = true
        this.paperCate = true
        this.$nextTick(() => {
          this.$refs.paperCate.init()
        })
      },
      deleteCate() {
        this.current = { name: '', id: '' }
        this.cateId = ''
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.dataForm.page = val
        this.getDataList()
      },
      checkAll() {
        this.dataList.forEach(item => {
          if (!item.isChecked) {
            this.$set(item, 'isChecked', true)
            this.examList.push(item)
          }
        })
      },
      checkOne(user) {
        this.$set(user, 'isChecked', true)
        this.examList.push(user)
      },
      onsubmit() {
        if (this.examId) {
          this.addLocally()
        } else {
          this.loading = true
          this.dialogVisible = false
          this.setExamList(this.examList)
        }
      },
      async addLocally() {
        let res = await this.$http.post('/usercenter-admin/breakRule/addExam', {
          'userId': this.userId,
          'breakRuleId': this.examId,
          'examIds': this.examList.map(x => x.examId).join(','),
          'status': 1
        })

        if (res.code === 200) {
          this.loading = true
          this.dialogVisible = false
          this.setExamList(this.examList)
        }
      },
      close() {
        this.dialogVisible = false
      }
    }
  }
</script>

<style scoped>

</style>
